<template>
  <div class="content">
    <div class="top">
      <div class="me">我的</div>
      <div class="outer_wrapper">
        <div class="avatar">
          <van-image width="3.5rem" height="3.5rem" round fit="cover"
            :src="userInfo.avatar ? userInfo.avatar : 'https://img.cwiyc.top/avatar.png'" />
        </div>
        <div class="mess">
          <div class="email">{{ userInfo.nickname }}</div>
          <div class="phone">{{ userInfo.phone }}</div>
        </div>
        <div class="arrow" @click="goto">
          <van-icon name="arrow" />
        </div>
        <div class="login" v-show="show" @click="goLogin">点此登录</div>
      </div>
    </div>
    <div class="center">
      <div class="during_meal">
        <van-icon size="2rem" name="fire" :badge="badge" color="#FD5F64" />
        <van-cell class="word" title="进行中" to="/order" />
        <!-- <div class="word">出餐中</div> -->
      </div>
      <div class="line">|</div>
      <div class="my_orders">
        <van-icon size="2rem" name="balance-list" color="#FA5A26" />
        <van-cell class="word" title="我的订单" to="/order" />
        <!-- <div class="word">我的订单</div> -->
      </div>
    </div>
    <div class="middle">
      <van-cell-group inset>
        <van-cell title="我的评价" icon="coupon-o" is-link to="/" />
        <van-cell title="联系平台" icon="more-o" is-link to="/connect" />
        <van-cell title="欢迎吐槽" icon="smile-comment-o" is-link to="/feedback" />
        <van-cell title="隐私政策" icon="shield-o" is-link to="/privacy" />
        <!-- <van-cell title="隐私政策" icon="shield-o" is-link
          url="http://img.cwiyc.top/static/%E7%96%AF%E5%91%B3%E7%BD%91%E5%9C%A8%E7%BA%BF%E7%82%B9%E9%A4%90%E7%B3%BB%E7%BB%9F%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96.html" /> -->
        <van-cell title="设置" icon="setting-o" is-link to="/setting" />
        <van-cell title="商家入驻" icon="shop-o" is-link to="/registershop" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const request = require('@/network/request').default;
import bus from 'vue3-eventbus'


export default {
  name: 'User',
  props: [],
  setup(props, context) {
    const userInfo = ref({
      avatar: 'https://img.cwiyc.top/avatar.png'
    })
    const show = ref(true)
    const badge = ref(0)
    const router = useRouter();
    function goto() {
      router.push('/personal')
    }
    function goLogin() {
      router.push('/login')
    }
    bus.emit('routerInfo', { active: router.currentRoute._value.name })
    onMounted(() => {
      if (JSON.parse(localStorage.getItem('userInfo'))) {
        userInfo.value = JSON.parse(localStorage.getItem('userInfo'))
        if (userInfo.value) {
          show.value = false
          request.post('/userorderlist', userInfo.value.uid).then(res => {
            res.data.forEach(item => {
              if (item.ostatus <= 1) {
                badge.value++;
              }
            })
          })
        }
      }
    })
    return {
      userInfo,
      goto,
      goLogin,
      show,
      badge
    }
  },
}
</script>

<style scoped lang="scss">
.content {
  height: 100vh;
  background-color: rgb(240, 236, 236);

  .top {
    background-color: rgb(16, 116, 253);
    height: 12rem;

    .me {
      color: white;
      padding: 12px 0 0 12px;
    }

    .outer_wrapper {
      // background-color: red;
      height: 5rem;
      width: 20rem;
      margin: 0 auto;
      position: relative;
      top: 2rem;

      .avatar {
        position: absolute;
        top: 0.6rem;
      }

      .mess {
        position: absolute;
        left: 5rem;
        top: 1.2rem;

        .email {
          color: #fff;
          font-weight: bold;
        }

        .phone {
          color: rgb(183, 175, 175);
          margin-top: 0.5rem;
        }
      }

      .arrow {
        color: #fff;
        position: absolute;
        top: 2rem;
        left: 18rem;
      }

      .login {
        position: absolute;
        color: #fff;
        left: 7rem;
        top: 1.5rem;
        border: 1px solid #fff;
        padding: 2px;
        border-radius: 5px;
      }
    }
  }

  .center {
    width: 20rem;
    height: 4.2rem;
    border-radius: 0.8rem;
    position: relative;
    top: -2.1rem;
    margin: 0 auto;
    background-color: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    .during_meal {
      display: flex;
      align-items: center;
      font-weight: bold;

      .word {
        margin-left: 8px;
      }
    }

    .line {
      color: rgb(226, 222, 222);
      font-size: large;
    }

    .my_orders {
      display: flex;
      align-items: center;

      .word {
        margin-left: 8px;
      }
    }
  }

  .middle {
    width: 23rem;
    margin: 0 auto;
  }

}
</style>